<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/methods.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div id="demo_0">
			【一】<b>hello world >></b>
			<p>{{message}}</p>
		</div>
		<hr size="1" />
		<div id="demo_1">
			【二】<b>data bind(数据绑定)>></b>
			<p>{{message}}</p>
			<p>{{*message}}</p>
			<input v-model="message">
		</div>
		<hr size="1" />
		<div id="demo_2">
			【三】<b>filter(过滤器) >></b>
			<p>{{message}}</p>
			<p>{{message | uppercase}}</p>
			<p>{{message | reverse | uppercase}}</p>
		</div>

		<hr size="1" />
		<div id="demo_3">
			【四】<b>v-for  >></b>
			<ul>
				<li v-for="todo in todos">
					{{ todo.text }}
				</li>
			</ul>
		</div>
		<hr size="1" />
		<div id="demo_4">
			【五】<b>methods  >></b>
			<p>{{ message }}</p>
			<button v-on:click="reverseMessage">Reverse Message</button>
		</div>
		<hr size="1" />
		<div id="demo_5">
			【六】<b>add and remove  >></b>
			<p></p>
			<input v-model="newItem" v-on:keyup.enter="addItem">
			<ul>
				<li v-for="item in datas">
					<span>{{ item.text }}</span>
					<button v-on:click="removeItem($index)">X</button>
				</li>
			</ul>
		</div>
		<hr size="1" />
		<div id="demo_6">
			【七】<b>v-if  >></b>
			<div v-if="Math.random() > 0.5">
				随机数大于 0.5
			</div>
			<div v-else>
				随机数不大于 0.5
			</div>
		</div>
		<hr size="1" />
			【八】<b>{{{html}}}  >></b>
		<div id="demo_7">
			{{{html}}}
		</div>
	</body>
	<script src="js/index.js" type="text/javascript" charset="utf-8"></script>

</html>